PWYW Details

This a template that shows the details of the plan that the user chooses on [PWYW](Onboarding Templates/PWYW).

[!NOTE] The PWYW Details must come after the PWYW template in the onboarding

PWYW (Pay What You Want) is a new template that shows 4 plans that the user can choose one of – similar to how it works on the Webflow pages.

Key	Notes
`type`	`pwywDetails`
`stepId`	Unique step id
`title`	The step title
`subtitle`	The step subtitle
`useHTML`	This allows you to add inline HTML to the `title`, `subtitle` of the step to give it a `font-kalam` or add a break to it `</br>` `<span class='font-kalam' style='color:#FFA033;'>choose the amount</span> you pay.` Here for example, this text will start on a new font and will be in font `kalam` in the color `FFA033`. In case like that you must set `useHTML` to true.
`pwywStepId`	The step Id for the pwyw template. (this is important to show the details of the plan that the user chooses of that template)
`checkoutLink`	The link of the checkout page. Important: The link of the checkout page must have a placeholder `plan={'{{'}PLAN{{'}}'}` in it. So that the placholder would change based on the user’s choice Example of that link: `https://shape.thefabulous.co/purchase/shape/checkout?plan={'{{'}PLAN{{'}}'}&discount=25&upsellPath=/journey/upselling/personalized-coaching-plan-1&upsellPath2OnSkipPath1=/journey/coaching/personal-coaching-3`
`backgroundColor`
`textColor`	The main textColor on the page
`ctaText`	The text of the main button
`ctaColor`	The text color of the main button
`ctaBackgroundColor`	The background color of the main button
`ctaHoverBackgroundColor`	The background of the main button on hovering.
`backButtonColor`	The text color of the back button
`backButtonText`	The text of the back button
`backButtonBackgroundColor`	The background color of the back button

[!NOTE] The placeholders that that template accepts are:

{{PRICE}} to show the price of the plan.

{{PRICE_PER_WEEK}} to show the price of the plan per week.

{{CURRENCY}} to show the currency of the plan.

{{TODAY|day|+7}} to show the date after 7 days - where 7 days are the trial days.

{{PLAN}} is the placeholder of the plan code that the user should choose on the PWYW template (that placeholder is supported in the checkoutLink)

Example:

  {
      "type": "pwywDetails",
      "stepId": "step_55",
      "backgroundColor": "#FFF4EE",
      "textColor": "#251C93",
      "ctaText": "Continue",
      "title": "Start your 7-day trial with Shape",
      "subtitle": "<strong>You'll unlock:</strong><br/>Full access to the Shape app<br>Daily hypnotherapy and relaxation sessions<br/>Motivational messages<br/>An inspiring, supportive community",
      "paragraph": "<span style='padding-bottom:18px; display:block;'>Your personalized program has been saved for the next <strong>15 minutes.</strong></span>Total today <strong>{{PRICE}} {{CURRENCY}}</strong></br>Price after trial <strong>{{PRICE_PER_WEEK}} {{CURRENCY}}</strong> per week<br/>Billed at {{TODAY|day|+7}} every 12 months",
      "useHTML": true,
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#3425B8",
      "ctaHoverBackgroundColor": "#2A1E93",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF",
      "backButtonText": "Back",
      "pwywStepId": "step_54",
      "loadingImage": "https://c.thefab.co/web-onboarding/shape/ibs/ibs-39.png",
      "loadingText": "Please wait a couple of moments",
      "loadingBackgroundColor": "rgba(255, 244, 238, 0.95)",
      "checkoutLink": "https://shape.thefabulous.co/purchase/shape/checkout?plan={{PLAN}}&discount=25&upsellPath=/journey/upselling/personalized-coaching-plan-1&upsellPath2OnSkipPath1=/journey/coaching/personal-coaching-3"
  }